<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div class="box">
                    <span>蜗牛在线实验室</span> 欢迎您：admin
                    <img class="header-profile" src="../assets/images/zu428@2x.png" />
                </div>
                <div>
                    <el-button type="primary">设置</el-button>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <!-- 侧边栏 -->
                    <el-col :span="12" style="max-width: 100%">
                        <el-menu router :default-active="route.path" class="el-menu-vertical-demo">
                            <template v-for="item in menus" :key="item.title">
                                <el-menu-item v-if="!item.children" :index="item.path">
                                    <el-icon><icon-menu /></el-icon>
                                    <span>{{ item.title }}</span>
                                </el-menu-item>
                                <el-sub-menu v-else :index="item.path">
                                    <template #title>
                                        <el-icon>
                                            <location />
                                        </el-icon>
                                        <span>{{ item.title }}</span>
                                    </template>
                                    <el-menu-item v-for="obj in item.children" :key="obj.title" :index="obj.path">
                                        <el-icon><icon-menu /></el-icon> <span>{{ obj.title }}</span>
                                    </el-menu-item>
                                </el-sub-menu>
                            </template>
                        </el-menu>
                    </el-col>
                    <!-- 主体 -->
                </el-aside>
                <el-main>
                    <!-- <el-breadcrumb separator="/" v-for="item in menus" :key="item.title"> -->
                        <!-- <el-breadcrumb-item v-if="!item.children" :index="item.path" :to="item.path">{{ item.title }}</el-breadcrumb-item>
                        <div v-else :index="item.path">
                            <el-breadcrumb-item v-for="obj in item.children" :key="obj.title" :to="obj.path">{{ obj.title }}</el-breadcrumb-item>
                        </div> -->

                        <!-- <el-breadcrumb-item>{{ item.title }}</el-breadcrumb-item>
                        <el-breadcrumb-item v-for="obj in item.children" :key="obj.title" :to="obj.path">{{ obj.title }}</el-breadcrumb-item> -->
                    
                    <!-- </el-breadcrumb> -->
                    <div class="whiteBox">
                        <router-view />
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
    
<script setup lang='ts'>
import { menus } from '../pages/configs/sideMenus';
import { useRouter, useRoute } from "vue-router";

const router = useRouter(); //用于路由跳转
const route = useRoute(); //获取路由的信息
</script>
    
<style lang="less" scoped>
.el-container {
    height: 100vh;
}

.el-header {
    box-sizing: border-box;
    background-color: #00152A;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;

    .box {
        display: flex;
        align-items: center;
        color: white;
        font-size: 15px;

        span {
            font-style: oblique;
            font-size: 25px;
            margin-right: 15px;
        }
    }

    .header-profile {
        width: 50px;
        height: 50px;
        border-radius: 50px;
        margin-left: 10px;
    }
}

.el-aside {
    background-color: white;
}

.el-main {
    background-color: #F5F5F5;
    box-sizing: border-box;
    padding: 2%;
    .whiteBox {
        width: 100%;
        height: 100%;
        background-color: white;
    }
}
</style>